<!--
 * @Descripttion: 过滤器V2
 * @version: 2.2
 * @Author: sakuya
 * @Date: 2021年7月30日14:48:41
 * @LastEditors: 孙开源 && sunkaiyuan@namenode.cn
 * @LastEditTime: 2023-10-29 15:09:06
-->

<template>
  <div
    :style="{ 'max-width': width, margin: '5px' }"
    class="FilterSelf"
    @keyup.enter="ok"
  >
    <el-row v-if="['select', 'switch', 'ColorRender'].indexOf(option.data.xtype) == -1">
      <el-select class="FilterSelfSelect" v-model="option.data.type" size="small">
        <el-option
          v-for="ope in operator"
          :key="ope.value"
          :label="ope.label"
          :value="ope.value"
        ></el-option>
      </el-select>
    </el-row>
    <el-row>
      <el-input
        v-if="!option.data.type"
        v-model="option.data.type"
        placeholder="请选择过滤字段"
        disabled
        size="small"
      >
      </el-input>
      <!-- 输入框 -->
      <el-col :span="24" style="text-align: center">
        <skVxeFilterList
          v-if="sonRefresh"
          :xtype="option.data.xtype"
          v-model="option.data.value"
          :placeholder="params.column.filterRender.attrs.placeholder"
          :multiple="option.data.multiple"
          :remote="option.data.remote"
          :params="params"
        />
      </el-col>
    </el-row>
    <el-row v-if="['select', 'switch', 'ColorRender'].indexOf(option.data.xtype) == -1">
      <el-col :span="12" style="text-align: center">
        <el-button type="success" size="small" @click="ok" circle>
          <el-icon>
            <ElIconCheck />
          </el-icon>
        </el-button>
      </el-col>
      <el-col :span="12" style="text-align: center">
        <el-button type="info" size="small" @click="clear" circle>
          <el-icon>
            <ElIconDelete />
          </el-icon>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import config from "@/config/filterBar";
import skVxeFilterList from "@/components/skVxeFilterList";
export default {
  name: "filterBar",

  props: {
    params: Object,
  },
  components: {
    skVxeFilterList,
  },
  data() {
    return {
      option: this.params.column.filters[0],
      operator: [],
      sonRefresh: false,
      width: "",
    };
  },
  mounted() {},
  watch: {
    "option.data.value"(val) {
      if (["select", "switch", "ColorRender"].indexOf(this.option.data.xtype) > 0) {
        this.option.data.type = "eq";
        if (val == "") this.clear();
        else this.ok();
      }
    },
  },
  updated() {
    this.option = this.params.column.filters[0];
    let operatorkey = this.option.data.xtype;
    if (["datetimerange", "daterange"].indexOf(operatorkey) != -1) {
      operatorkey = "range";
      this.width = "190px";
    } else this.width = "120px";

    if (["select", "switch"].indexOf(operatorkey) != -1) operatorkey = "number";
    this.operator = config.operator[operatorkey];
    //初始化的值在给定的操作中没有，就用第一个赋值
    if (typeof this.operator != "undefined" && this.operator.length >= 1) {
      let type = this.operator.filter(element => {
        return element.value == this.option.data.type;
      });
      if (type.length == 0) this.option.data.type = this.operator[0]["value"];
    }
    //刷新组件
    this.sonRefresh = false;
    this.$nextTick(() => {
      this.sonRefresh = true;
    });
  },
  methods: {
    //立即过滤
    ok() {
      if (this.params) {
        const { $panel } = this.params;

        $panel.changeOption(null, true, this.option);
        $panel.confirmFilter();
      }
    },

    //清空过滤
    clear() {
      if (this.params) {
        const { $panel } = this.params;
        $panel.resetFilter();
      }
    },
  },
};
</script>

<style scope>
.FilterSelf .el-row {
  margin-bottom: 5px;
}
</style>
